import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtInput, AtForm, AtButton, AtIcon, AtToast } from 'taro-ui'

import './index.scss'

export default class Password extends Component {
  constructor (props) {
    super(props)
    this.state = {
      value: '',
      isOpen: false
    }
  }

  config = {
    navigationBarTitleText: '手机号登录'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  handleChange (value) {
    this.setState({
      value: value
    })
  }

  handleLogin () {
    if (this.state.value.length === 0) {
      this.setState({
        isOpen: true
      })
    }
  }

  render () {
    return (
      <View className='password'>
        <AtForm>
          <AtInput
            clear
            name='value'
            type='password'
            focus
            placeholder='输入密码'
            value={this.state.value}
            onChange={this.handleChange.bind(this)}
          />
          <AtButton type='primary' circle onClick={this.handleLogin.bind(this)}>立即登录</AtButton>
        </AtForm>
        <View className='password-reset'>
          <Text>重设密码</Text><AtIcon value='chevron-right' size='16'></AtIcon>
        </View>
        <AtToast isOpened={this.state.isOpen} status='error' text='请输入密码'></AtToast>
      </View>
    )
  }
}
